<template>
<div>
	<!--头部-->
	<div class="shang-top">
		<a href="#/"><img class="shang-jian" src="../assets/img/duanhuowang/zuo.png" alt=""/></a>
		<span class="shangpin">商品详情</span>
		<span class="shang-rimg">
			<img class="shang-gou" src="../assets/img/shouye/meishi/baigou.png" alt=""/>
			<img class="shang-ff" src="../assets/img/duanhuowang/fan.png" alt=""/>
			<img class="shang-shou" src="../assets/img/shouye/pinpai/xiaoshouye.png" alt=""/>
		</span>
	</div>	
	<!--轮播图-->
	<div v-for="ww in 8" class="ss-dtu">
		<a>
		<img class="ss-img" src="../assets/img/shouye/meishi/kouhong.png" alt=""/>
		</a>
		<p class="ss-zi">
			"这是”继续拖动，查看图文详情“的下一页即商品图片详情页，主要是该商品的图片+文字""这是”继续拖动，查看图文详情“的下一页即商品图片详情页，主要是该商品的图片+文字",。
		</p>
	</div>
	<!--添加购物车-->
		<div class="tiangou">
			<span class="kefu">
				<img src="../assets/img/duanhuowang/kefu.png" alt=""/>在线客服
			</span>
			<span class="jiagou jiache">加入购物车</span>
		</div>
</div>
</template>

<script>
	export default {
		methods:{
			diantian:function(){
				$(".tiangou>span").click(function(){
					$(this).addClass("jiache").siblings("span").removeClass("jiache");
				})
			}
		},
		mounted:function(){
			this.diantian();
		}
	}
</script>

<style>
	/*头部*/
	.shang-top {
		position: fixed;
		top: 0;
		left: 0;
		background: #e53e42;
		width: 100%;
		height: 9.6rem;
		display: flex;
		justify-content: space-around;
		align-items: center;
		z-index: 5;
	}
	.shangpin {
		color: white;
		font-size: 3.6rem;
		text-align: center;
		padding: 0 10rem 0 20rem;
		font-weight: 200;
	}

	.shang-jian {
		width: 2.3rem;
		height: 3.8rem;
	}
	.shang-gou,.shang-ff {
		width: 3.6rem;
		height: 3.4rem;
	}
	.shang-ff{
		padding:0 2rem;
	}
	.shang-shou{
		width: 3.6rem;
		height: 3.6rem;
	}
		/*添加购物车*/
	.tiangou{
		position: fixed;
		bottom: 0;
		width: 100%;
		overflow: hidden;
		background: #FFFFFF;
		border-top:0.1rem solid #CCCCCC;
	}
	.tiangou>span{
		display: inline-block;
		width: 36rem;
		height: 9.6rem;
		font-size: 2.8rem;
		line-height: 9.6rem;
	}
	.kefu{
		text-align: center;
		float:left;
	}
	.kefu>img{
		width: 3.7rem;
		margin:-1rem 2rem;
	}
	.jiagou{
		text-align: center;
		float:left;
	}
	.jiache{
		color:#FFFFFF;
		background: #F8545F;
	}
	/*轮播图*/
	.ss-dtu{
		width: 100%;
		margin-top: 9.6rem;
		text-align: center;
		padding-top: 8rem;
		margin-bottom: 9.6rem;
	}
	.ss-dtu>a{
		display: block;
		width: 100%;
		height: 30rem;
	}
	.ss-img{
		width: 12rem;
		height: 24.5rem;
	}
	.ss-zi{
		text-indent: 2rem;
		font-size: 2.4rem;
		color:#4D4D4D;
		text-align: left;
	}
</style>